<template>
	<div>
		<div class='downBox' v-if='styleType==1'>
			<div class='box' v-for="(item,index) in hoursArr" :key="'hour'+index">{{item}}</div>
			<div class='maohao'>﹕</div>
			<div class='box' v-for="(item,index) in minutesArr" :key="'minutes'+index">{{item}}</div>
			<div class='maohao'>﹕</div>
			<div class='box' v-for="(item,index) in secondsArr" :key="'seconds'+index">{{item}}</div>
		</div>
		<div class="style2" v-if='styleType==2'>
			<div v-for="(item,index) in minutesArr" :key="'minutes'+index">{{item}}</div>
			<div>∶</div>
			<div v-for="(item,index) in secondsArr" :key="'seconds'+index">{{item}}</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'Countdown',
		data() {
			return {

				timer: null,
				hoursArr: ['0', '0'],
				minutesArr: ['0', '0'],
				secondsArr: ['0', '0'],
			}
		},
		props: {
			styleType: {
				type: Number,
				default: 1
			},
			targetTimestamp: {
				require: true,
				type: Number,
				default: 0
			},
			state:{
				type: String,
			}
		},
		created() {
			this.startCountdown()
		},
		beforeDestroy() {
			clearInterval(this.timer); // 组件销毁时清除定时器
		},
		methods: {
			startCountdown() {
			
				if(this.$props.state == 2 && this.$props.styleType == 1){
					this.hoursArr = ['0', '0']
					this.minutesArr = ['0', '0']
					this.secondsArr = ['0', '0']
				}else{
					this.updateCountdown();
					this.timer = setInterval(this.updateCountdown, 1000); // 每秒更新一次
				}
				
			},
			updateCountdown() {
				const currentTime = Date.now(); // 当前时间戳
				const distance = this.$props.targetTimestamp - currentTime; // 计算剩余时间
				if (this.$props.styleType == 1) {
					// 计算剩余的小时、分钟和秒
					const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((distance % (1000 * 60)) / 1000);
					this.hoursArr = (hours.toString().length == 1) ? ('0' + hours.toString()).split('') : hours.toString()
						.split('')
					this.minutesArr = (minutes.toString().length == 1) ? ('0' + minutes.toString()).split('') : minutes
						.toString().split('')
					this.secondsArr = (seconds.toString().length == 1) ? ('0' + seconds.toString()).split('') : seconds
						.toString().split('')

				} else if (this.$props.styleType == 2) {
					const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // 剩余分钟数
					const seconds = Math.floor((distance % (1000 * 60)) / 1000); // 剩余秒数
					this.minutesArr = (minutes.toString().length == 1) ? ('0' + minutes.toString()).split('') : minutes
						.toString().split('')
					this.secondsArr = (seconds.toString().length == 1) ? ('0' + seconds.toString()).split('') : seconds
						.toString().split('')
				}

				// 如果倒计时结束
				if (distance < 0) {
					clearInterval(this.timer);
					this.hoursArr = ['0', '0']
					this.minutesArr = ['0', '0']
					this.secondsArr = ['0', '0']
					
					this.$emit('refreshInterface');
				}
			}
		}
	}
</script>

<style scoped>
	.downBox {
		display: flex;
		align-items: center;
	}

	.downBox .box {
		width: 24rpx;
		height: 40rpx;
		background: #151822;
		margin: 0 4rpx;
		border-radius: 8rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.maohao {
		font-weight: bold;
		font-size: 28rpx;
		color: #151822;
	}
	.style2{
		display: flex;
		align-items: center;
	}
</style>